<template>
    <div class="binding-info">
        <p class="binding-title">账号绑定信息</p>
        <div>
            <!-- 手机 -->
            <div class="binding-title-box">
                <img src="./img/phone.png" alt="" class="binding-icon">
                <span>手机</span>
                <span class="content">{{userInfo.userBindIphoneVo.iphone || '-'}}</span>
                <!-- <span>机号一体验证</span>
                <span class="content">验证通过</span> -->
            </div>
            <div class="myTable-box">
                <div class="myTable-title">
                    <div style="flex:1.5">手机号码</div>
                    <div style="flex:1.5">绑定时间</div>
                    <!-- <div style="flex:none;width:130px;">绑定时间</div>
                    <div>账号信用值低</div>
                    <div>垃圾账号</div>
                    <div>无效账单</div>
                    <div>黑名单</div>
                    <div>批量操作</div>
                    <div>自动机</div>
                    <div>环境异常</div>
                    <div>垃圾账号</div>
                    <div>js上报异常</div>
                    <div>撞库</div> -->
                </div>
                <div class="myTable-content" v-if="dataList.bindPhone">
                    <div style="flex:1.5">{{userInfo.userBindIphoneVo.iphone || '-'}}</div>
                    <div style="flex:1.5">{{timeInit(userInfo.userBindIphoneVo.time)}}</div>
                    <!-- <div style="flex:none;width:130px;">{{dataList.bindPhone.defenseInfo.ctime}}</div> -->
                    <!-- <div>{{dataList.bindPhone.defenseInfo.level}}</div> -->
                    <!-- 账号信用值低 -->
                    <!-- <div v-if="dataList.bindPhone.defenseInfo.risktype1 === 1" class="red">是</div> -->
                    <!-- <div v-else>否</div> -->
                    <!-- 垃圾账号 -->
                    <!-- <div v-if="dataList.bindPhone.defenseInfo.risktype2 === 1" class="red">是</div> -->
                    <!-- <div v-else>否</div> -->
                    <!-- 无效账单 -->
                    <!-- <div v-if="dataList.bindPhone.defenseInfo.risktype3 === 1" class="red">是</div> -->
                    <!-- <div v-else>否</div> -->
                    <!-- 黑名单 -->
                    <!-- <div v-if="dataList.bindPhone.defenseInfo.risktype4 === 1" class="red">是</div> -->
                    <!-- <div v-else>否</div> -->
                    <!-- 批量操作 -->
                    <!-- <div v-if="dataList.bindPhone.defenseInfo.risktype101 === 1" class="red">是</div> -->
                    <!-- <div v-else>否</div> -->
                    <!-- 自动机 -->
                    <!-- <div v-if="dataList.bindPhone.defenseInfo.risktype102 === 1" class="red">是</div> -->
                    <!-- <div v-else>否</div> -->
                    <!-- 环境异常 -->
                    <!-- <div v-if="dataList.bindPhone.defenseInfo.risktype201 === 1" class="red">是</div> -->
                    <!-- <div v-else>否</div> -->
                    <!-- js上报异常 -->
                    <!-- <div v-if="dataList.bindPhone.defenseInfo.risktype202 === 1" class="red">是</div> -->
                    <!-- <div v-else>否</div> -->
                    <!-- 撞库 -->
                    <!-- <div v-if="dataList.bindPhone.defenseInfo.risktype203 === 1" class="red">是</div> -->
                    <!-- <div v-else>否</div> -->
                </div>
                <div class="myTable-content" v-else>
                    <div>暂无数据</div>
                </div>
            </div>

            <!-- 微信 -->
            <div class="binding-title-box">
                <img src="./img/wx.png" alt="" class="binding-icon">
                <span>微信</span>
                <span v-if="userInfo.userWechatInfoVo && userInfo.userWechatInfoVo.wechatName">{{userInfo.userWechatInfoVo.wechatName}}</span>
                <span v-else>-</span>
            </div>
            <div class="myTable-box">
                <div class="myTable-title">
                    <div style="flex:1.5;">openId</div>
                    <div style="flex:1.5;">绑定时间</div>
                </div>

                <div class="myTable-content" v-if="userInfo.userWechatInfoVo">
                    <div style="flex:1.5">{{userInfo.userWechatInfoVo.openid || '-'}}</div>
                    <div style="flex:1.5">{{timeInit(userInfo.userWechatInfoVo.time)}}</div>
                </div>

                <div class="myTable-content" v-else>
                    <div>无绑定数据</div>
                </div>
            </div>

            <!-- QQ -->
            <div class="binding-title-box">
                <img src="./img/qq.png" alt="" class="binding-icon">
                <span>QQ</span>
                <span v-if="userInfo.userQQInfoVo && userInfo.userQQInfoVo.nickName">{{userInfo.userQQInfoVo.nickName}}</span>
                <span v-else>-</span>
            </div>
            <div class="myTable-box">
                <div class="myTable-title">
                    <div style="flex:1.5;">openId</div>
                    <div style="flex:1.5;">绑定时间</div>
                </div>
                <div class="myTable-content" v-if="userInfo.userQQInfoVo">
                    <div style="flex:1.5;">{{userInfo.userQQInfoVo.openid}}</div>
                    <div style="flex:1.5">{{timeInit(userInfo.userQQInfoVo.time)}}</div>
                </div>
                <div class="myTable-content" v-else>
                    <div>无绑定数据</div>
                </div>
            </div>
        </div>
        <!-- 身份认证信息 -->
        <p class="binding-title">身份认证信息</p>
        <div>
            <div class="binding-title-box">
                <img src="./img/tixian.jpeg" alt="" class="binding-icon">
                <span>提现身份证信息</span>
                <!-- <span class="content">{{userInfo.userApplyIdCardVo.name || '-'}}</span> -->
            </div>
            <div class="myTable-box">
                <div class="myTable-title">
                    <div style="flex:1.5">姓名</div>
                    <div style="flex:1.5">身份证号码</div>
                    <div style="flex:1.5">身份证照片正面</div>
                    <div style="flex:1.5">身份证照片反面</div>
                </div>
                <div class="myTable-content" v-if="userInfo.userApplyIdCardVo">
                    <div style="flex:1.5">{{userInfo.userApplyIdCardVo.name}}</div>
                    <div style="flex:1.5">{{userInfo.userApplyIdCardVo.idcard}}
                        <span v-if="userInfo.userApplyIdCardVo.idCardToBlackList !== 0" style="color: red;">{{ userInfo.userApplyIdCardVo.idCardToBlackList === 1 ? '（黑名单封禁中）' : '（有黑名单）记录'}}</span>
                    </div>
                    <div style="flex:1.5">
                        <div class="idcard-img" v-if="userInfo.userApplyIdCardVo.cardFrontImgUrl">
                            <el-image
                                @click="showImgList(userInfo.userApplyIdCardVo, 1)"
                                :src="userInfo.userApplyIdCardVo.cardFrontImgUrl"
                                :preview-src-list="srcList">
                            </el-image>
                        </div>
                        <span v-else>-</span>
                    </div>
                    <div style="flex:1.5">
                        <div class="idcard-img" v-if="userInfo.userApplyIdCardVo.cardBackImgUrl">
                            <el-image
                                @click="showImgList(userInfo.userApplyIdCardVo, 1)"
                                :src="userInfo.userApplyIdCardVo.cardBackImgUrl"
                                :preview-src-list="srcList">
                            </el-image>
                        </div>
                        <span v-else>-</span>
                    </div>
                </div>
                <div class="myTable-content" v-else>
                <div>暂无数据</div>
                </div>
            </div>

            <!-- 人脸识别身份信息 -->
            <div class="binding-title-box">
                <img src="./img/face.jpeg" alt="" class="binding-icon">
                <span>人脸识别身份信息</span>
                <!-- <span class="content">{{userInfo.userWechatApplyVo.name || '-'}}</span> -->
            </div>
            <div class="myTable-box">
                <div class="myTable-title">
                    <div style="flex:1.5">姓名</div>
                    <div style="flex:1.5">手机号</div>
                    <div style="flex:1.5">身份证号</div>
                    <div style="flex:1.5">身份证照片正面</div>
                    <div style="flex:1.5">身份证照片反面</div>
                    <div style="flex:1.5">人脸照片</div>
                </div>
                <div class="myTable-content" v-if="userInfo.userFaceRecognitionInfoVo">
                    <div style="flex:1.5">{{userInfo.userFaceRecognitionInfoVo.name}}</div>
                    <div style="flex:1.5">{{userInfo.userFaceRecognitionInfoVo.phone}}
                        <span v-if="userInfo.userFaceRecognitionInfoVo.phoneToBlackList !== 0" style="color: red;">{{ userInfo.userFaceRecognitionInfoVo.phoneToBlackList === 1 ? '（黑名单封禁中）' : '（有黑名单）记录'}}</span>
                    </div>
                    <div style="flex:1.5">{{userInfo.userFaceRecognitionInfoVo.idcard}}
                        <span v-if="userInfo.userFaceRecognitionInfoVo.idCardToBlackList !== 0" style="color: red;">{{ userInfo.userFaceRecognitionInfoVo.idCardToBlackList === 1 ? '（黑名单封禁中）' : '（有黑名单）记录'}}</span>
                    </div>
                    <div style="flex:1.5">
                        <div class="idcard-img" v-if="userInfo.userFaceRecognitionInfoVo.faceUrl">
                            <el-image
                                @click="showImgList(userInfo.userFaceRecognitionInfoVo, 2)"
                                :src="userInfo.userFaceRecognitionInfoVo.faceUrl"
                                :preview-src-list="srcList">
                            </el-image>
                        </div>
                        <span v-else>-</span>
                    </div>
                    <div style="flex:1.5">
                        <div class="idcard-img" v-if="userInfo.userFaceRecognitionInfoVo.nationalEmblemUrl">
                            <el-image
                                @click="showImgList(userInfo.userFaceRecognitionInfoVo, 2)"
                                :src="userInfo.userFaceRecognitionInfoVo.nationalEmblemUrl"
                                :preview-src-list="srcList">
                            </el-image>
                        </div>
                        <span v-else>-</span>
                    </div>
                    <div style="flex:1.5">
                        <div class="idcard-img" v-if="userInfo.userFaceRecognitionInfoVo.pictureUrl">
                            <el-image
                                @click="showImgList(userInfo.userFaceRecognitionInfoVo, 2)"
                                :src="userInfo.userFaceRecognitionInfoVo.pictureUrl"
                                :preview-src-list="srcList">
                            </el-image>
                        </div>
                        <span v-else>-</span>
                    </div>
                </div>
                <div class="myTable-content" v-else>
                <div>暂无数据</div>
                </div>
            </div>

            <!-- 下单华为身份信息 -->
            <div class="binding-title-box">
                <img src="./img/huawei.jpeg" alt="" class="binding-icon">
                <span>下单华为身份信息</span>
            </div>
            <div class="myTable-box">
                <div class="myTable-title">
                    <div style="flex:1.5">姓名</div>
                    <div style="flex:1.5">身份证号</div>
                </div>
                <div class="myTable-content" v-if="userInfo.userHuaWeiIdCard">
                    <div style="flex:1.5">{{userInfo.userHuaWeiIdCard.name}}</div>
                    <div style="flex:1.5">{{userInfo.userHuaWeiIdCard.idcard}}  <span v-if="userInfo.userHuaWeiIdCard.idCardToBlackList !== 0" style="color: red;">{{ userInfo.userHuaWeiIdCard.idCardToBlackList === 1 ? '（黑名单封禁中）' : '（有黑名单）记录'}}</span></div>
                </div>
                <div class="myTable-content" v-else>
                <div>暂无数据</div>
                </div>
            </div>
        </div>

        <p class="binding-title">提现绑定信息</p>
        <div>
            <!-- 支付宝 -->
            <div class="binding-title-box">
                <img src="./img/zhifubao.jpg" alt="" class="binding-icon">
                <span>支付宝</span>
                <span class="content">{{userInfo.userIphoneAppplyVo.name || '-'}}</span>
            </div>
            <div class="myTable-box">
                <div class="myTable-title">
                    <div style="flex:1.5">openid</div>
                    <div style="flex:1.5">绑定时间</div>
                </div>
                <div class="myTable-content" v-if="userInfo.userIphoneAppplyVo">
                    <div style="flex:1.5">{{userInfo.userIphoneAppplyVo.openid}}</div>
                    <div style="flex:1.5">{{timeInit(userInfo.userIphoneAppplyVo.time)}}</div>
                </div>
                <div class="myTable-content" v-else>
                <div>暂无数据</div>
                </div>
            </div>

            <!-- 微信 -->
            <div class="binding-title-box">
                <img src="./img/wx.png" alt="" class="binding-icon">
                <span>微信</span>
                <span class="content">{{userInfo.userWechatApplyVo.name || '-'}}</span>
            </div>
            <div class="myTable-box">
                <div class="myTable-title">
                    <div style="flex:1.5">openid</div>
                    <div style="flex:1.5">绑定时间</div>
                </div>
                <div class="myTable-content" v-if="userInfo.userWechatApplyVo">
                    <div style="flex:1.5">{{userInfo.userWechatApplyVo.openid}}</div>
                    <div style="flex:1.5">{{timeInit(userInfo.userWechatApplyVo.time)}}</div>
                </div>
                <div class="myTable-content" v-else>
                <div>暂无数据</div>
                </div>
            </div>
        </div>

        <!-- 历史绑定信息 -->
        <div style="margin-top:10px;"></div>
        <topTitle title="历史绑定记录"/>
        <p class="binding-title">账号绑定信息</p>

        <div>
            <!-- 手机 -->
            <div class="binding-title-box">
                <img src="./img/phone.png" alt="" class="binding-icon">
                <span>手机</span>
            </div>
            <div class="myTable-box">
                <div class="myTable-title">
                    <div style="flex:1.5">手机号码</div>
                    <div style="flex:1.5">绑定时间</div>
                </div>
                <template v-if="userInfo.userBindIphoneHistoryVo && userInfo.userBindIphoneHistoryVo.length">
                    <div class="myTable-content" v-for="(item, index) in userInfo.userBindIphoneHistoryVo" :key="index">
                        <div style="flex:1.5">{{item.iphone || '-'}}</div>
                        <div style="flex:1.5">{{timeInit(item.time)}}</div>
                    </div>
                </template>
                <div class="myTable-content" v-else>
                    <div>暂无数据</div>
                </div>
            </div>

            <!-- 微信 -->
            <div class="binding-title-box">
                <img src="./img/wx.png" alt="" class="binding-icon">
                <span>微信</span>
            </div>
            <div class="myTable-box">
                <div class="myTable-title">
                    <div style="flex:1.5;">微信昵称</div>
                    <div style="flex:1.5;">openId</div>
                    <div style="flex:1.5;">绑定时间</div>
                </div>
                <template v-if="userInfo.userWechatInfoHistoryVo && userInfo.userWechatInfoHistoryVo.length">
                    <div class="myTable-content" v-for="(item, index) in userInfo.userWechatInfoHistoryVo" :key="index">
                        <div style="flex:1.5">{{item.wechatName || '-'}}</div>
                        <div style="flex:1.5">{{item.openid || '-'}}</div>
                        <div style="flex:1.5">{{timeInit(item.time)}}</div>
                    </div>
                </template>
                <div class="myTable-content" v-else>
                    <div>暂无数据</div>
                </div>
            </div>

            <!-- QQ -->
            <div class="binding-title-box">
                <img src="./img/qq.png" alt="" class="binding-icon">
                <span>QQ</span>
            </div>
            <div class="myTable-box">
                <div class="myTable-title">
                    <div style="flex:1.5;">QQ昵称</div>
                    <div style="flex:1.5;">openId</div>
                    <div style="flex:1.5;">绑定时间</div>
                </div>
                <template v-if="userInfo.userQQInfoHistoryVo && userInfo.userQQInfoHistoryVo.length">
                    <div class="myTable-content" v-for="(item, index) in userInfo.userQQInfoHistoryVo" :key="index">
                        <div style="flex:1.5">{{item.nickName || '-'}}</div>
                        <div style="flex:1.5">{{item.openid || '-'}}</div>
                        <div style="flex:1.5">{{timeInit(item.time)}}</div>
                    </div>
                </template>
                <div class="myTable-content" v-else>
                    <div>暂无数据</div>
                </div>
            </div>
        </div>

        <p class="binding-title">提现绑定信息</p>
        <div>
            <!-- 支付宝 -->
            <div class="binding-title-box">
                <img src="./img/zhifubao.jpg" alt="" class="binding-icon">
                <span>支付宝</span>
            </div>
            <div class="myTable-box">
                <div class="myTable-title">
                    <div style="flex:1.5;">支付宝昵称</div>
                    <div style="flex:1.5;">openId</div>
                    <div style="flex:1.5;">绑定时间</div>
                </div>
                <template v-if="userInfo.userIphoneAppplyVoList && userInfo.userIphoneAppplyVoList.length">
                    <div class="myTable-content" v-for="(item, index) in userInfo.userIphoneAppplyVoList" :key="index">
                        <div style="flex:1.5">{{item.name || '-'}}</div>
                        <div style="flex:1.5">{{item.openid || '-'}}</div>
                        <div style="flex:1.5">{{timeInit(item.time)}}</div>
                    </div>
                </template>
                <div class="myTable-content" v-else>
                    <div>暂无数据</div>
                </div>
            </div>

            <!-- 微信 -->
            <div class="binding-title-box">
                <img src="./img/wx.png" alt="" class="binding-icon">
                <span>微信</span>
            </div>
            <div class="myTable-box">
                <div class="myTable-title">
                    <div style="flex:1.5;">微信昵称</div>
                    <div style="flex:1.5;">openId</div>
                    <div style="flex:1.5;">绑定时间</div>
                </div>
                <template v-if="userInfo.userWechatApplyVoList && userInfo.userWechatApplyVoList.length">
                    <div class="myTable-content" v-for="(item, index) in userInfo.userWechatApplyVoList" :key="index">
                        <div style="flex:1.5">{{item.name || '-'}}</div>
                        <div style="flex:1.5">{{item.openid || '-'}}</div>
                        <div style="flex:1.5">{{timeInit(item.time)}}</div>
                    </div>
                </template>
                <div class="myTable-content" v-else>
                    <div>暂无数据</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { formatDate } from '@/utils/utils'

export default {
    name: 'bindingInfo',
    data () {
        return {
            dataList: {
                phone: 18550991234,
                bindPhone: {
                    defenseInfo: {
                        phone: 18550991234,
                        ctime: new Date(),
                        level: 1,
                        risktype1: 1,
                        risktype2: 1,
                        risktype3: 1,
                        risktype4: 1,
                        risktype101: 1,
                        risktype102: 1,
                        risktype201: 1,
                        risktype202: 1,
                        risktype203: 1
                    }

                }
            },
            userInfo: {
                userBindIphoneVo: {}, // 绑定手机
                userWechatInfoVo: {}, // 绑定微信
                userQQInfoVo: {}, // 绑定QQ信息
                userIphoneAppplyVo: {}, // 提现绑定支付宝
                userWechatApplyVo: {}, // 提现绑定微信
                userBindIphoneHistoryVo: [], // 历史绑定手机
                userWechatInfoHistoryVo: [], // 历史绑定微信
                userQQInfoHistoryVo: [], // 历史绑定QQ
                userIphoneAppplyVoList: [], // 提现历史绑定支付宝
                userWechatApplyVoList: [] // 提现历史绑定微信
            },
            srcList: []
        }
    },

    props: ['detail'],

    created () {
        if (this.detail && this.detail.userId) {
            this.getDetail()
        }
    },

    methods: {
        showImgList (info, index) {
            if (index === 1) {
                let imgArr = []
                this.srcList = []
                if (info.cardFrontImgUrl) {
                    imgArr.push(info.cardFrontImgUrl)
                }
                if (info.cardBackImgUrl) {
                    imgArr.push(info.cardBackImgUrl)
                }
                this.srcList = imgArr
            } else {
                let imgArr = []
                this.srcList = []
                if (info.faceUrl) {
                    imgArr.push(info.faceUrl)
                }
                if (info.nationalEmblemUrl) {
                    imgArr.push(info.nationalEmblemUrl)
                }
                if (info.pictureUrl) {
                    imgArr.push(info.pictureUrl)
                }
                this.srcList = imgArr
            }
        },
        async getDetail () {
            let res = await this.$http.get('/user/getUserBindRecord', {
                params: {
                    userId: this.detail.userId
                }
            })
            res.data.userBindIphoneVo = res.data.userBindIphoneVo || {}
            res.data.userWechatInfoVo = res.data.userWechatInfoVo || {}
            res.data.userQQInfoVo = res.data.userQQInfoVo || {}
            res.data.userIphoneAppplyVo = res.data.userIphoneAppplyVo || {}
            res.data.userWechatApplyVo = res.data.userWechatApplyVo || {}
            res.data.userBindIphoneHistoryVo = res.data.userBindIphoneHistoryVo || []
            res.data.userWechatInfoHistoryVo = res.data.userWechatInfoHistoryVo || []
            res.data.userQQInfoHistoryVo = res.data.userQQInfoHistoryVo || []
            res.data.userIphoneAppplyVoList = res.data.userIphoneAppplyVoList || []
            res.data.userWechatApplyVoList = res.data.userWechatApplyVoList || []
            this.userInfo = res.data || {
                userBindIphoneVo: {}, // 绑定手机
                userWechatInfoVo: {}, // 绑定微信
                userQQInfoVo: {}, // 绑定QQ信息
                userIphoneAppplyVo: {}, // 提现绑定支付宝
                userWechatApplyVo: {}, // 提现绑定微信
                userBindIphoneHistoryVo: [], // 历史绑定手机
                userWechatInfoHistoryVo: [], // 历史绑定微信
                userQQInfoHistoryVo: [], // 历史绑定QQ
                userIphoneAppplyVoList: [], // 提现历史绑定支付宝
                userWechatApplyVoList: [] // 提现历史绑定微信
            }
        },

        timeInit (time) {
            if (time) {
                return formatDate(time, 'YYYY-MM-DD HH:MM:SS')
            } else {
                return '-'
            }
        }
    },

    filters: {
        statusInit (val) {
            if (val === 1) {
                return '是'
            } else {
                return '否'
            }
        }
    }
}
</script>

<style lang="scss" scoped>
  .binding-info {
    .binding-title {
      color: #363636;
      font-size: 16px;
      font-weight: 500;
      margin: 16px 0 10px;
    }
    .binding-title-box {
      margin: 16px 0 10px;
      .binding-icon {
        vertical-align: middle;
        height: 28px;
        margin-right: 10px;
      }
      > span {
        font-size: 14px;
        font-weight: 600;
        padding-right: 10px;
      }
      > .content {
          font-weight: normal;
      }
    }
    .income-box {
      height: 107px;
      border-radius: 4px;
      border: solid 1px #dfdfdf;
      background-color: #ffffff;
      overflow: hidden;
      > div {
        height: 50%;
        display: flex;
        > div {
          flex: 1;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
      .income-box-top {
        border-bottom: solid 1px #dfdfdf;
        background-color: #fcfcfc;
        font-size: 12px;
        font-weight: 500;
        color: #9ba0b1;
        }
      .income-box-bottom {
        font-size: 12px;
        font-weight: 500;
        color: #363636;
        }
    }
    .user-rate {
      display: flex;
      padding: 10px 20px;
      > div {
        width: 50%;
        height: 100%;
        > div {
          font-size: 14px;
          font-weight: 500;
          color: #363636;
        }
      }
    }

    // 自定义表格
    .myTable-box {
      border-radius: 4px;
      border: solid 1px #dfdfdf;
      border-bottom: none;
      background-color: #ffffff;
      overflow: hidden;
      > div {
        height: 53px;
        display: flex;
        > div {
          flex: 1;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
        .myTable-title {
            border-bottom: solid 1px #dfdfdf;
            background-color: #fcfcfc;
            font-size: 12px;
            font-weight: 500;
            color: #9ba0b1;
            text-align: center;
        }
        .myTable-content {
            border-bottom: solid 1px #dfdfdf;
            font-size: 12px;
            font-weight: 500;
            color: #363636;
            .idcard-img {
                display: inline-block;
                width: 60px;
                height: 40px;
                /deep/ .el-image__inner {
                    display: inline-block;
                    width: 60px;
                    height: 40px;
                }
            }
        }
    }

    .red {
      color: red!important;
    }
  }
</style>
